<template>
  <h1>vuex-demo - {{ num }}</h1>

  <p>
    <RouterLink to="/home">首页</RouterLink> |
    <RouterLink to="/about">关于页</RouterLink> |
    <RouterLink to="/mine">我的页</RouterLink> |
    <RouterLink to="/data">数据页</RouterLink> |
    <RouterLink to="/getters">getters</RouterLink> |
  </p>

  <RouterView />
</template>

<script>
export default {
  data() {
    return {
      // 不推荐在组件里面用data的数据来接受store的数据
      // 因为仓库的数据改变的时候，那么data里面的数据就不会跟着变(没有响应式)
      // num: this.$store.state.count,
    };
  },
  // 如果想要响应式，需要使用计算属性
  computed: {
    num() {
      return this.$store.state.count;
    },
  },
};
</script>
